<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态歌词</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: skyblue;
            font-size: 2em;
        }

        .content {
            position: relative;
            height: 2em;
        }

        .lyric1 {
            position: absolute;
            top: 0;
            color: white;
        }

        .lyric2 {
            --progress: 0%;
            position: absolute;
            top: 0;
            color: yellow;
            clip-path: polygon(0% 0%, var(--progress) 0, var(--progress) 100%, 0 100%);
            transition: all 0.1s ease-in-out;
        }
    </style>
    <script type="text/javascript" src="lyrics.js"></script>
</head>

<body>
    <input class='open-music' type="file"></input>
    <audio controls></audio>
    <div class="content">
        <div class="lyric1">歌词</div>
        <div class="lyric2">歌词</div>
    </div>
</body>
<script>
    const openMusic = document.querySelector('.open-music')
    const audio = document.querySelector('audio')
    const p1 = document.querySelector('.lyric1')
    const p2 = document.querySelector('.lyric2')
    openMusic.addEventListener('change', function (e) {
        const file = e.target.files[0]
        const url = URL.createObjectURL(file)
        audio.src = url
        audio.load()
    })
    let index = 0
    let beforeTime = lyrics[index].time

    let waitTime = lyrics[index + 1].time - lyrics[index].time
    let progress = 0
    audio.ontimeupdate = function () {

        progress = (this.currentTime * 1000 - beforeTime) / waitTime * 100 + 3
        p2.style.setProperty('--progress', progress + '%')
        if (index < lyrics.length && this.currentTime * 1000 >= lyrics[index].time) {

            console.log(index);
            console.log(this.currentTime);
            console.log(lyrics[index].content);
            console.log('-------------------');
            progress = 0
            p2.style.setProperty('--progress', progress + '%')
            p1.innerHTML = lyrics[index].content
            p2.innerHTML = lyrics[index].content
            if (index < lyrics.length - 1) {
                beforeTime = lyrics[index].time
                waitTime = lyrics[index + 1].time - lyrics[index].time
            } else {
                progress = 100
            }
            index++
        }

    }
    audio.onended = function () {
        console.log('歌词已经结束');
        index = 0
        progress = 100
    }
</script>

</html>